<template>
  <d2-container>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-scrollbar class="w-full h-full">
          <area-tree @nodeChange="treeNodeChange"></area-tree>
        </el-scrollbar>
      </el-col>
      <el-col :span="19">
        <el-row :gutter="20">
          <el-form label-position="right" :inline="true">
            <el-form-item  label-width="40px" class="el-form-item--mini">
              <el-date-picker
                v-model="dataForm.date"
                placeholder="时间"
                style="width: 200px;"
                class="filter-item"
                size="small"
                type="date"
                suffix-icon="el-icon-date"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item  label-width="40px" class="el-form-item--mini">
              <el-button type="primary" size="small" icon="el-icon-search"  @click="getPowerDataList" style="margin-left:16px;">查询</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="theme-front-color">本月碳排放</div>
            <div style="height:250px;" id="month_pai_fang_jie_gou_chart"></div>
          </el-col>
          <el-col :span="12">
            <div class="theme-front-color">本年碳排放</div>
            <div style="height:250px;" id="year_pai_fang_jie_gou_chart"></div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
        <div id="analysis_analysis_bar" style="height:400px;"></div>
        </el-row>
      </el-col>
    </el-row>
  </d2-container>
</template>

<script>
  import { mapGetters } from 'vuex'
/*  import areaTree from '../energyAnalysis/compont/area_tree'*/
  import areaTree from '../energyAnalysis/compont/area_tree_onceclick'
  import * as echarts from 'echarts'
  import * as Util from "@/utils";
  import Config from "@/utils/config"

  export default {
    name: 'co2Analysis',
    data() {
      return {
        dataForm:{
          energyType: '',
          date:new Date(),
          dateType: 'date',
          subEnergyType:[],//分项选择值
        },
        buildList:[],
      }
    },
    computed: {
      ...mapGetters('d2admin/theme', ['activeSetting'])
    },
    components:{
      areaTree
    },
    created() {
      this.$nextTick(() => {
        this. getPowerDataList()
      })
    },
    methods: {
      getPowerDataList(){
        this.getPowerData("1")
        this.getPowerData("2")
        this.getPowerData("3")
      },
      treeNodeChange(data){
        this.buildList = data
        this.getPowerDataList()
      },
      drawPieMonth(meterdataList) {
        // console.log(this.activeSetting)
      	const chart = echarts.init(document.querySelector('#month_pai_fang_jie_gou_chart'))
      	chart.setOption({
          tooltip: {
            trigger: 'item',
          },
          legend: {
            right: 20,
            textStyle: {
              color: this.activeSetting.name === 'd2' ? '#333' : '#ccc'
            },
          },
      		series: [
      			{
      				type: 'pie',
      				// data: [
              //   { name: '天然气', value: 28.54 },
              //   { name: '煤炭', value: 17.40 },
              //   { name: '太阳能', value: 15.31 },
              //   { name: '石油', value: 38.75 }
              // ],
              data:  meterdataList,
              radius: ['40%', '70%'],
      				avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 16,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
      			}
      		]
      	})
      },
      drawPieYear(meterdataList) {
      	const chart = echarts.init(document.querySelector('#year_pai_fang_jie_gou_chart'))
      	chart.setOption({
          tooltip: {
            trigger: 'item',
          },
          legend: {
            right: 20,
            textStyle: {
              color: this.activeSetting.name === 'd2' ? '#333' : '#ccc'
            },
          },
      		series: [
      			{
      				type: 'pie',
              data:  meterdataList,
      				// data: [
              //   { name: '天然气', value: 36.50 },
              //   { name: '煤炭', value: 15.55 },
              //   { name: '太阳能', value: 27.17 },
              //   { name: '石油', value: 20.79 }
              // ],
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 16,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
      			}
      		]
      	})
      },
      formarDate(type, date) {
        return Util.dateFormat(Config.searchDate.find(item => item.date == type).format, date)
      },
      getPowerData(dataType) {
        if(this.buildList.length == 0){
          return
        }
        this.$api.okhttp({
          url:this.$http.adornUrl('/co2/analysis/list'),
          method: "post",
          data: this.$http.adornParams(
            {
              buildingIds: [this.buildList],
              date: (this.dataForm.date&&this.dataForm.date!="")? this.formarDate(this.dataForm.dateType,new Date(this.dataForm.date)):'',
              dateType: dataType,
              customerId: this.$util.cookies.get("customer_id"),
              projectId:this.$util.cookies.get("cuuren_projectId")
            }
          )
        }).then((data) => {
          if (data && data.code === 0) {
            let meterdataList = data.data;
            if(dataType=='1'){
              this.drawBar(meterdataList)
            }else if(dataType=='2'){
              this.drawPieMonth(meterdataList)
            }else if(dataType=='3'){
              this.drawPieYear(meterdataList)
            }
          }
        })
      },
      objArraySort(objArr, key)
      {
        let result = objArr.slice(0);
        return result.sort((a, b) => parseInt(a[key]) - parseInt(b[key]));
      },
      drawBar(data) {
        const chart = echarts.init(document.querySelector('#analysis_analysis_bar'))

        let seriesArry = []
        let xdata = []
        for(let i = 0;i<data.length;i++){
          if(data[i].subitemName !== '合计'){
            let val = data[i].value;
            let valueArry = []
            Object.keys(val).forEach((key) => {
              valueArry.push({"id":key,"value":val[key]})
            })
            valueArry = this.objArraySort(valueArry, "id")
            xdata = valueArry.map(i=>i.id)
            let ydata = valueArry.map(i=>i.value)

            seriesArry.push({
              data: ydata,
              type: 'bar',
              name: data[i].name,
              stack: 'use'
            })
          }
        }

        chart.setOption({
          grid: {
            left: '5%',
            right: '5%',
            top: '5%',
            bottom: '5%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23].map(i => i < 9 ? '0' + i : i + ''),
            axisLine: {
              lineStyle: {
                color: this.activeSetting.name === 'd2' ? '#333' : '#999'
              },
            },
          },
          legend: {
            right: 20,
            textStyle: {
              color: this.activeSetting.name === 'd2' ? '#333' : '#ccc'
            },
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: this.activeSetting.name === 'd2' ? '#333' : '#999'
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#999']
              },
            },
          },
          series: seriesArry
        })
      },
    },
  }
</script>

<style>
</style>
